"use client"
import Image from "next/image";
import Link from "next/link";
import Productions from "@/constant/Productions";
import 'swiper/css';
import SpecialtyBanner from "@/app/specialty/_components/SpecialtyBanner";
import BottomLinkSection from "@/components/BottomLinkSection";

export default function Page() {
    return (
        <>
            <div>
                <div className={"max-w-7xl mx-auto rounded-xl overflow-hidden"}>
                    <SpecialtyBanner />
                </div>
                <div className={"max-w-7xl mx-auto px-4"}>
                    <div className={"text-xl font-bold py-4"}>特产美食</div>
                    <div className={"grid grid-cols-12 gap-4"}>
                        {
                            Productions.map((item, index) => {
                                if( item.type == 'foods'){
                                    return  <Link href={`/product?id=${item.id}`} key={index}
                                                  className={"col-span-12 md:col-span-4 lg:col-span-3"}>
                                        <Image src={item.cover} alt={""} height={300} width={400}
                                               className={"aspect-[4/3] object-cover rounded-md"}/>
                                        <div>{item.title}</div>
                                        <div className={"line-clamp-2 text-gray-500 text-sm"}>{item.description}</div>
                                    </Link>
                                }
                            })
                        }
                    </div>
                </div>

                <div className={"bg-gray-100 h-[128px] w-full mt-20"}></div>

                <div className={"max-w-7xl mx-auto px-4 pb-20"}>
                    <div className={"text-xl font-bold py-4"}>其他产业</div>
                    <div className={"grid grid-cols-12 gap-4"}>
                        {
                            Productions.map((item, index) => {
                                return <Link href={`/product?id=${item.id}`} key={index}
                                             className={"col-span-12 md:col-span-4 lg:col-span-3"}>
                                    <Image src={item.cover} alt={""} height={300} width={400}
                                           className={"aspect-[4/3] object-cover rounded-md"}/>
                                    <div>{item.title}</div>
                                    <div className={"line-clamp-2 text-gray-500 text-sm"}>{item.description}</div>
                                </Link>
                            })
                        }
                    </div>
                </div>
                <BottomLinkSection />
            </div>
        </>
    )
}